﻿@page "/badge"

<Block Title="Badge 徽章组件" Introduction="提供各种颜色的徽章小挂件组件">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Primary">primary</Badge></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Secondary">secondary</Badge></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Success">success</Badge></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Danger">danger</Badge></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Warning">warning</Badge></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Info">info</Badge></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Dark">dark</Badge></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Light">light</Badge></div>
            </div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Badge Color="Color.Primary"&gt;primary&lt;/Badge&gt;
&lt;Badge Color="Color.Secondary"&gt;secondary&lt;/Badge&gt;
&lt;Badge Color="Color.Success"&gt;success&lt;/Badge&gt;
&lt;Badge Color="Color.Danger"&gt;danger&lt;/Badge&gt;
&lt;Badge Color="Color.Warning"&gt;warning&lt;/Badge&gt;
&lt;Badge Color="Color.Info"&gt;info&lt;/Badge&gt;
&lt;Badge Color="Color.Dark"&gt;dark&lt;/Badge&gt;
&lt;Badge Color="Color.Light"&gt;light&lt;/Badge&gt;
    </pre>
    </CodeTemplate>
</Block>

<Block Title="胶囊徽章" Introduction="圆角更大的徽章挂件">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Primary">primary</Badge></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Secondary">secondary</Badge></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Success">success</Badge></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Danger">danger</Badge></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Warning">warning</Badge></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Info">info</Badge></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Dark">dark</Badge></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Light">light</Badge></div>
            </div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Badge IsPill="true" Color="Color.Primary"&gt;primary&lt;/Badge&gt;
&lt;Badge IsPill="true" Color="Color.Secondary"&gt;secondary&lt;/Badge&gt;
&lt;Badge IsPill="true" Color="Color.Success"&gt;success&lt;/Badge&gt;
&lt;Badge IsPill="true" Color="Color.Danger"&gt;danger&lt;/Badge&gt;
&lt;Badge IsPill="true" Color="Color.Warning"&gt;warning&lt;/Badge&gt;
&lt;Badge IsPill="true" Color="Color.Info"&gt;info&lt;/Badge&gt;
&lt;Badge IsPill="true" Color="Color.Dark"&gt;dark&lt;/Badge&gt;
&lt;Badge IsPill="true" Color="Color.Light"&gt;light&lt;/Badge&gt;
    </pre>
    </CodeTemplate>
</Block>

<Block Title="按钮内徽章" Introduction="按钮内部徽章">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Primary">主要按钮<Badge Color="Color.Danger">1</Badge></Button></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                    <div class="badge-widget">
                        <i class="fa fa-tv"></i>
                        <Badge Color="Color.Success"><span style="padding: 0 2px;">8</span></Badge>
                    </div>
                </div>
            </div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Button Color="Color.Primary"&gt;主要按钮&lt;Badge Color="Color.Danger"&gt;1&lt;/Badge>&lt;/Button&gt;
    </pre>
    </CodeTemplate>
</Block>

<AttributeTable Items="@GetAttributes()" />
